How to Use Frames in your Pages

Frames are not really like any other command in HTML, in the fact that you are not writing or creating a page that activates a feature in the traditional sense. What you are doing is creating a template which contains links to two or more HTML pages where usually one page would be situated.

So What Commands Are Involved

`Frame Tags`

<FRAMESET> -- This tag alerts the browser that FRAMES are going to be used on this page. <COLS> -- This denotes the number of columns to be used in the Frame. <FRAME SRC> -- This tells the browser where the source to the Fames are. Frames read left to right. The first source offered will be the left frame. The number of sources must equal the number of COLS in the Frame </FRAMESET> -- Tells the browser that FRAMES are over.

Creating your first Frame Page

`A Very Basic Example`

An example follows, <HTML><HEAD><TITLE> A very basic frame setup </TITLE></HEAD> <FRAMESET cols=50%,50%> <FRAME SRC="page1.html" name="Left"> <FRAME SRC="page2.html" name="Main"> </FRAMESET> </HTML> Click here to see this example. So what does all that mean, ok here is a brief summary of what is written above. Firstly I told the browser that I wanted to use Frames by using the <FRAMESET>command. There are two verticle columns (<FRAMESET cols=50%,50%>) one is 50% of the total width of the page and the other is 50%. Can I use other percentages? Yes that isnt a problem, just separate the percentages by commas and get it all to add up to 99% or 100%. Why 99% I hear you ask well as an example you want 3 equal Frames you would have to split them up as 33%, 33% and 33% this adds up to 99% and gives you 3 equal frames. The browser will just distributes the final 1% over the three frames. You may instead of using percentages use pixels so it might look like the following (<FRAMESET cols=150, *>) This would tell the computer that you want 2 columns one being 150 pixels wide and the other denoted by '*' meaning to fill the rest of the viewable web page. Next we had to tell the browser where the source to the frames are, (<FRAME SRC="nameoffile.html" name="name_to_be_called. >)Each frame is a link to a different .html file so if you have like in our example two columns you WILL need two (<FRAME SRC>) lines. The name tag describes the link, and will be used for targetting links later on. The first frame in our example goes to 'page1.html' this means the first column will display the contents of 'page1.html' Whilst the second column will display the contents of 'page2.html'. The whole equation is rounded off with the (</FRAMESET>) tag.

Inclusion of Rows

You may also place ROWS into your Frames. Take the following as an example. <FRAMESET cols=50%,50%> <FRAMESET ROWS="50%,50%"> <FRAME SRC="TopLeft.html"> <FRAME SRC="BottomLeft.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="TopRight.html"> <FRAME SRC="MiddleRight.html"> <FRAME SRC="BottomRight.html"> </FRAMESET> </FRAMESET> Click here to see this example. Lets now go through the above example. <FRAMESET cols=50%,50%> #This sets up the columns needed in the Frame. <FRAMESET ROWS="50%,50%"> #Look at the LEFT hand column and split it 50 / 50. <FRAME SRC="TopLeft.html"> #Name of the the Top Left source file. <FRAME SRC="BottomLeft.html"> #Name of the Bottom Left source file. </FRAMESET> #Finish the Left hand Column Rows. We must now look at the right hand column and set up the rows there. <FRAMESET ROWS="33%,33%,33%"> #Three rows in the right hand column <FRAME SRC="TopRight.html"> <FRAME SRC="MiddleRight.html"> <FRAME SRC="BottomRight.html"> #Souces for the rows </FRAMESET> #Finish the Right hand Column Rows </FRAMESET> #End the whole Frame setup.

Linking Pages in Frames

You should now be able to setup frames but now we need to look at how to link when using frames. There are three different ways of doing this. 1) Click on a link in a frame--just that frame changes pages This works if you just use a link like you are at the moment in your non-frame pages so dont bother changing anything, just use <A HREF="yourpagelink.html">Link name.</A> 2) Click on a link in one frame and open a page in a different frame. Go back to our original example, we used the name tag and called the first frame 'left' and the second frame 'main' so if you were for instance clicking on a link in 'left' and wanted it to open in the 'main' frame you would use the following. <A HREF="yourpagelink.html" TARGET="main"> 3) Click on a link in a frame, and the new page is displayed in a new page. To just open up a new page without frames you again need to target the link, but this time using the '_TOP' tag so the command would look like <A HREF="yourpagelink.html" TARGET="_top"> On a final note All this should allow you to get your pages up and running with Frames, of course there are alot more ways to manipulate frames, but all that will be left to you for now. There will be an Advanced FRAMES tutorial in the near future looking into the other commands used to manipulate Frames. If you are using Frames on your FortuneCity page and you create a frame big enough to hold the banner and call it "main", then the banner bot will only place a banner in that frame, and your other frames will be left alone by the bot. On a final note please remember that not everyone can view frames, and some people just dont like pages with frames. One way around this is to have people link to a normal page with an option of viewing your page in either FRAMES or NO FRAMES and then taking them to whatever version they want. For more information please email [email protected]